<template>
 <div class="goodsList">
     <div class="goods-item" v-for="item of lists":key="item.id" @click="jump(item.id)">
       <img :src="item.imgUrl" alt="">
       <h2 class="title">{{item.title}}</h2>
       <div class="info">
         <p class="price">
           <span class="now">￥{{item.newPrice}}</span>
           <span class="old">￥{{item.oldPrice}}</span>
         </p>
         <p class="seller">
           <span>热卖中</span>
           <span>剩{{item.seller}}件</span>
         </p>
       </div>
     </div>
    
     <mt-button type="danger" size="large" >加载更多</mt-button>
 </div>
</template>

<script>
 export default {
   data () {
     return {
       lists:[
         {
           imgUrl:"http://ofv795nmp.bkt.clouddn.com//upload/201504/20/thumb_201504200119256512.jpg",
           id:1,
           title:"小米（Mi）小米Note 16G双网通版",
           oldPrice:999,
           newPrice:888,
           seller:60
         },
          {
           imgUrl:"http://ofv795nmp.bkt.clouddn.com//upload/201504/20/thumb_201504200119256512.jpg",
           id:2,
           title:"小米（Mi）小米Note 16G双网通版",
           oldPrice:999,
           newPrice:888,
           seller:60
         },
          {
           imgUrl:"http://ofv795nmp.bkt.clouddn.com//upload/201504/20/thumb_201504200119256512.jpg",
           id:3,
           title:"小米（Mi）小米Note 16G双网通版",
           oldPrice:999,
           newPrice:888,
           seller:60
         }
       ]
     }
   },
   methods:{
     jump(id){
       this.$router.push({name:"goodsinfo",params:{id:id}})
     }
   },
   components: {

   }
 }
</script>

<style lang="scss" scoped>
.goodsList{
  display: flex;
  flex-wrap: wrap;
  padding: 7px;
  justify-content:space-between;
 
  .goods-item{
    display: flex;
    justify-content:space-between;
    flex-direction: column;
    width: 49%;
    border: 1px solid salmon;
    box-shadow: 0 0 8px salmon;
    padding: 2px;
    margin: 4px 0;
    min-height: 278px;
    
    img{
      width: 100%;
    }
    .title{
      font-size: 14px;
    }
    .info{
      background: #eee;

      p{
        padding: 5px;
        margin: 0;
      }
      .price{
        .now{
         color: red;
         font-size: 16px;
        }
        .old{
          margin-left:10px;
          font-size: 12px;
          text-decoration: line-through;

         
        }
      }
      .seller{
        font-size: 13px;
        display: flex;
        justify-content:space-between;
      }
    }
  }
}
</style>

